<div id="tb<?php echo $uniqid;?>" class="easyui-panel" style="padding:5px">
  <table class="datagrid-toolbar" cellspacing="0" cellpadding="0" style="padding:5px 10px !important; background: none; border-bottom:none;">
    <tbody>
    <tr>
      <td><a href="javascript:void(0);" onclick="scoreshopManageAdd();" class="l-btn l-btn-small l-btn-plain"><span
              class="l-btn-left l-btn-icon-left"><i class="iconfont icon-tianjia1"></i><span class="l-btn-text">增加</span></span></a></td>
      <td>
        <div class="datagrid-btn-separator"></div>
      </td>
      <td><a href="javascript:void(0);" onclick="scoreshopManageEdit();" class="l-btn l-btn-small l-btn-plain"><span
              class="l-btn-left l-btn-icon-left"><i class="iconfont icon-bianji"></i><span class="l-btn-text">编辑</span></span></a></td>
      <td>
        <div class="datagrid-btn-separator"></div>
      </td>
      <td><a href="javascript:void(0);" onclick="scoreshopManageDelete();" class="l-btn l-btn-small l-btn-plain"><span
              class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shanchu"></i><span class="l-btn-text">删除</span></span></a></td>
      <td>
        <div class="datagrid-btn-separator"></div>
      </td>
      <td><a href="javascript:void(0);" @click="init();" class="l-btn l-btn-small l-btn-plain"><span
              class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxin"></i><span class="l-btn-text">重载</span></span></a></td>
      <td>&nbsp;&nbsp;<input id="scoreshopKeywords" v-model="params.scoreshopKeywords" style="width:200px" type="text" placeholder="输入商品名称或ID"
                            class="easyui-input textbox" @keyup.enter="init"></td>
      <td><span style="line-height:30px;">价格区间</span>
        <input id="scoreshopMinPrice" v-model="params.scoreshopMinPrice" style="width:50px" placeholder="最低价格" type="text"
               class="easyui-input textbox">
        -
        <input id="scoreshopMaxPrice" v-model="params.scoreshopMaxPrice" style="width:50px" placeholder="最高价格" type="text"
               class="easyui-input textbox"></td>
      <td><span style="line-height:30px;">积分区间</span>
        <input id="scoreshopMinScore" v-model="params.scoreshopMinScore" style="width:50px" placeholder="最低价格" type="text"
               class="easyui-input textbox">
        -
        <input id="scoreshopMaxScore" v-model="params.scoreshopMaxScore" style="width:50px" placeholder="最高价格" type="text"
               class="easyui-input textbox"></td>
      <td><a href="javascript:void(0);" @click="init();" class="l-btn l-btn-small l-btn-plain"><span
              class="l-btn-left l-btn-icon-left"><i class="iconfont icon-sousuo"></i><span class="l-btn-text">查询</span></span></a></td>
    </tr>
    </tbody>
  </table>
</div>
<div class="con"  style="-moz-user-select:none;">
  <table id="scoreshopManage"></table>
</div>
<div id="scoreshopManagedlg" class="easyui-dialog" style="width:840px; height:520px;" title="信息框" closed="true"></div>
<script>
  var scoreshopManageAdd = function () {
    $("#scoreshopManagedlg").dialog({
      title: '新增积分商品',
      closed: false,
      width: 980,
      height: 750,
      cache: false,
      href: '/admin/scoreshop/add',
      modal: true,
      buttons: [{
        text: '下一步',
        id: 'scoreshopsubmit',
        iconCls: 'icon-ok',
      }, {
        text: '关闭',
        iconCls: 'icon-no',
        handler: function () {
          $("#scoreshopManagedlg").dialog('close');
        }
      }]
    });
  };

  var scoreshopLink = function (id) {
    $.post('/admin/scoreshop/link', {id: id}, (data)=> {
      if (parseInt(data.ret) === 0) {
        let url = data.data; //拿到想要复制的值
        let copyInput = document.createElement('input');//创建input元素
        document.body.appendChild(copyInput);//向页面底部追加输入框
        copyInput.setAttribute('value', url);//添加属性，将url赋值给input元素的value属性
        copyInput.select();//选择元素
        document.execCommand("Copy"); //执行复制命令
        $.messager.show({
          title: '提示',
          msg: data.msg,
          timeout: 3000,
          showType: 'slide'
        });
      } else {
        $.messager.alert('提示', data.msg, 'warning');
      }
    }, 'json');
  };

  var scoreshopManageEdit = function (id, title = '') {
    let rowId = id || ($('#scoreshopManage').datagrid('getSelected') && $('#scoreshopManage').datagrid('getSelected').goods_id);
    let ise = '';
    let buttonsArr = [{
        text: '保存',
        id: 'submitGoods',
        iconCls: 'icon-ok',
      }, {
        text: '关闭',
        iconCls: 'icon-no',
        handler: function () {
          $("#scoreshopManagedlg").dialog('close');
        }
      }];
    if(!title.length){
      title = '编辑积分商品';
      ise = '&ise=1'
    }else{
      buttonsArr.unshift({
        text: '上一步',
        id: 'backSelectGoods',
        iconCls: 'icon-undo',
        handler: function () {
          $("#scoreshopManagedlg").dialog('close');
          scoreshopManageAdd();
        }
      });
    }
    if (rowId) {
      $("#scoreshopManagedlg").dialog({
        title: title,
        closed: false,
        width: 1080,
        height: 620,
        cache: false,
        href: '/admin/scoreshop/getgoodsskuprice?mode=getsku&goods_id=' + rowId + ise,
        modal: true,
        buttons: buttonsArr,
      });
    } else {
      $.messager.alert('提示', '请先选择要编辑的行！', 'warning');
    }
  };
  var scoreshopManageDelete = function (id) {
    let rowId = id || ($('#scoreshopManage').datagrid('getSelected') && $('#scoreshopManage').datagrid('getSelected').goods_id);
    if (rowId) {
      $.messager.confirm('提示', '确定删除吗？', function (r) {
        if (r) {
          $.messager.progress();
          $.post('/admin/scoreshop/delete', {goods_id: rowId}, function (data) {
            $.messager.progress('close');
            if (data.ret === 0) {
              $.messager.show({
                title: '提示',
                msg: data.msg,
                timeout: 3000,
                showType: 'slide'
              });
              scoreshopManageReload();
            } else {
              $.messager.alert('提示', data.msg, 'warning');
            }
          }, 'json');
        }
      });
    } else {
      $.messager.alert('提示', '请先选择要删除的行！', 'warning');
    }
  };
  var scoreshopManageVm = new Vue({
    el: '#tb<?php echo $uniqid;?>',
    data: {
      params: {
        scoreshopKeywords: '',
        scoreshopMinPrice: '',
        scoreshopMaxPrice: '',
        scoreshopMinScore: '',
        scoreshopMaxScore: '',
      },
      initLoad:false,
    },
    filters: {
      formatDate(nS){
        return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
      }
    },
    mounted() {
      setTimeout(()=>{
        this.mounted();
      }, 200);
    },
    methods: {
      mounted: function (){
        this.init();
      },
      init: function () {
        scoreshopManageReload();
      },
    }
  });
  
  var scoreshopManageReload = function () {
    if(scoreshopManageVm.initLoad){
      scoreshopManageVm.initLoad = false;
    }else{
      $("#scoreshopManage").datagrid('load', scoreshopManageVm.params);
    }
  };

  var scoreshopManageSearch = function () {
    var height = $(window).height() - $(".top").height() - 46;
    var width = $(window).width() - $(".leftmenu").width() - 8;
    $("#scoreshopManage").datagrid({
      title: '积分商品管理',
      width: width,
      height: height,//高度
      singleSelect: true,//如果为true，则只允许选择一行
      striped: true,//是否显示斑马线效果。
      rownumbers: false,//如果为true，则显示一个行号列。
      pagination: true,//是否显示分页
      pageSize: 10,
      pageList: [10, 20, 50, 100],
      method: 'post',
      sortName: 'created_at',
      sortOrder: 'desc',
      idField: 'id',
      url: '/admin/scoreshop/index',
      queryParams: scoreshopManageVm.params,
      fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
      nowrap: true,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
      selectOnCheck: false,
      checkOnSelect: true,
      loadMsg:'正在处理，请稍后。。。',
      toolbar: '#tb<?php echo $uniqid;?>',
      columns: [[
        {field:'id',title:'ID', width: fixWidth(5), align: "center", halign: 'center'},
        {field:'goods_id',title:'商品信息', width: fixWidth(30), align: "center", halign: 'center', formatter:function (value,rowData,rowIndex){
            let goods_info = '';
            if(rowData.goods) {
              if (rowData.goods.image) {
                goods_info += '<div style="display: flex" class="goodsinfo_wenzi">';
                goods_info += '<div style="width: 32px; display: flex; align-items: center;">' +
                        '<img style="width: 30px; height: 30px; border-radius: 5px; border:1px solid #eee; overflow: hidden;" src="' + rowData.goods.image + '">' +
                        '</div>';
                goods_info += '<div style="width: calc(100% - 42px); padding-left: 10px; text-align: left;">';
              } else {
                goods_info += '<div class="goodsinfo_wenzi" style="text-align: left;">';
              }
              goods_info += rowData.goods.title + '<br>商品ID：' + value + ', <span>';
              goods_info += rowData.goods.is_sku ? '多规格' : '单规格';
              goods_info += '</span></div>';
              if (rowData.goods.image) {
                goods_info += '</div>';
              }
            }
            return goods_info;
        }},
        {field:'score_sku_sum_stock',title:'积分商城总库存', width: fixWidth(15), align: "center", halign: 'center'},
        {field:'sales',title:'销量', width: fixWidth(10), align: "center", halign: 'center'},
        {field:'score',title:'积分现金', width: fixWidth(20), align: "center", halign: 'center', formatter:function (value,rowData,rowIndex){
            return value + '积分 + '+ rowData.price + '元';
          }},
        {field: 'options', title: '操作', width: fixWidth(20), align: "center", halign: 'center', formatter: function (value, rowData, rowIndex) {
            let buttons = '<div class="table">';
              buttons += '<span class="l-btn l-btn-small color9 table" onclick="scoreshopLink(\'' + rowData.goods_id + '\')"><span class="l-btn-text">复制链接</span></span>';
              buttons += '<span class="l-btn l-btn-small l-btn-left color9 table" style="margin-right: 5px;" onclick="scoreshopManageEdit(\'' + rowData.goods_id + '\')"><span class="l-btn-text">编辑</span></span>';
              buttons += '<span class="l-btn l-btn-small l-btn-left color9 table" style="margin-right: 5px;" onclick="scoreshopManageDelete(\'' + rowData.goods_id + '\')"><span class="l-btn-text">删除</span></span>';
            return buttons + '</div>';
          }},
      ]],
    });
    scoreshopManageVm.initLoad = true;
  };
  onDatagridResize("#scoreshopManage");
  scoreshopManageSearch();
</script>
<style>
  .status_0{
    color: #ee650c;
  }
  .status_1{
    color: #0eb913;
  }

  .change_before{
    color: #2f2e2e;
  }

  .change_after{
    color: #FF3300;
  }

  .l-btn-plain{
    border: rgba(0,0,0,0) 1px solid;
  }

  .datagrid-body-row td{
    line-height: 1.8em !important;
  }

  .datagrid-row td{
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.8em !important;
  }

  .datagrid-toolbar .selected {
    color: #f1f1f1;
    background: #1065a7;
    border: 1px solid #f0f0f0;
  }

  .touxiang_wenzi span{
    color: #007293;
  }

  .keywords_input_search_box{
    width: 300px;
    border-color: #cccccc;
  }

  #backSelectGoods{
    float: left;
  }

  .goodsinfo_wenzi span{
    color: #ee650c;
  }

  .status_up{
    color: #0eb913;
  }
  .status_down{
    color: #9f1807;
  }
</style>
